{% extends "layout/public_manage.html" %}

{% block content %}
<div style="padding: 0 15px;" id="content">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>数据字典</h2>
            <ol class="breadcrumb">
                <li>
                    <a>系统管理</a>
                </li>
                <li>
                    <a>系统配置</a>
                </li>
                <li class="active">
                    <strong>数据字典</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <!--table 表格-->
    <div class="row">
        <div class="col-lg-2">
            <div class="ibox border-all">
                <div class="ibox-title">
                    <h5>数据字典</h5>
                </div>
                <div class="ibox-content">
                    <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                    <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                    <ul id="myTree" class="ztree"></ul>
                </div>
            </div>
        </div>
        <div class="col-lg-10">
            <!--<table id="table"></table>-->
            <div class="ibox border-all">
                <div class="ibox-title">
                    <h5>字典数据-{{leftTreeType.name}}</h5>
                </div>
                <div class="ibox-content" style="position: relative;">
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="categoryClick()">字典分类</button>
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加项目</button>
                    <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-width="50" data-field="id"></th>
                            <th data-field="name">项目名</th>
                            <th data-field="dict_value">项目值</th>
                            <th data-field="pinyin">简拼</th>
                            <th data-field="dis_order">排序</th>
                            <th data-width="50" data-field="status" data-align="center" data-formatter="checkBoxFormatter">有效</th>
                            <th data-field="description">描述</th>
                            <th data-width="150" data-formatter="operateFormatter" data-events="actionEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>
    <!--添加 编辑 字典模态框-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}字典</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>项目名<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称" v-model="dictionaryData.name">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>项目值<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入编号"
                               v-model="dictionaryData.dict_value">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>排序<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="number" class="form-control form-manage2" placeholder="请输入排序号"
                               v-model="dictionaryData.dis_order">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title"></div>
                        <div class="pull-left" style="margin-top: 3px;">
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input id="F_EnabledMark" type="checkbox" v-model="dictionaryData.status" @click="changeCheck(dictionaryData.status)">
                                有效
                            </label>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>描述：</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none" v-model="dictionaryData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--分类管理模态-->
    <div id="categoryModal" class="modal fade">
        <div class="modal-dialog" style="width: 900px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">分类管理</h4>
                </div>
                <div class="modal-manage" style="height: 500px;">
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addCategoryClick()">新增</button>
                    <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 61px;">查询</button>
                    <table id="categoryTable"
                           data-toggle="table"
                           data-toolbar=".categoryBar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-width="50" data-field="id"></th>
                            <th data-field="name">名称</th>
                            <th data-field="code">编号</th>
                            <th data-field="dis_order">排序</th>
                            <th data-width="50" data-field="status" data-align="center" data-formatter="checkBoxFormatter">有效</th>
                            <th data-field="description">备注</th>
                            <th data-width="150" data-formatter="operateCategoryFormatter" data-events="actionCategoryEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--添加分类-->
    <div id="addCategoryModal" class="modal fade">
        <div class="modal-dialog" style="margin-top: 70px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}分类</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>上级：</span>
                        </div>
                        <input id="addPermissionInput" class="form-control form-manage2" autocomplete="off" v-model="permissionsModalParentNameL"
                               placeholder="===请选择===">
                        <ul id="permissionTree" class="ztree modalZTree border-all" style="width: 480px;"></ul>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称"
                               v-model="categoryModalData.name">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>编号<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称"
                               v-model="categoryModalData.code">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>排序<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="number" class="form-control form-manage2" placeholder="请输入名称"
                               v-model="categoryModalData.dis_order">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title"></div>
                        <div class="pull-left" style="margin-top: 3px;">
                            <label style="margin-right: 5px;cursor: pointer;">
                                <input type="checkbox" v-model="categoryModalData.status" @click="changeCheck(categoryModalData.status)">
                                有效
                            </label>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>描述：</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none" v-model="categoryModalData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="addCategory()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">是否删除当前项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 类型 模态-->
    <div id="deleteCategoryModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">是否删除当前类型</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteCategoryTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
{% endblock %}

{% block script %}
<!--Ztreegrid-->
<script src="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table-tree.js') }}"></script>
<!-- Toastr -->
<script src="{{ url_for('static', filename='plugins/toastr/toastr.min.js') }}"></script>
<script>
    //Vue 实例化
    var vm = new Vue({
        el: '#content',
        data: {
            leftTreeLoading:true,               //左侧树结构加载判断
            leftTreeList:[],                    //左侧树结构值
            tableList:[],                       //主体table中list结构数据
            categoryTableList:[],               //字典分类模块中 树table
            leftTreeType:{                      //点击左侧树结构获取到的值
                name:'未选择分类'
            },
            permissionsModalParentNameL:'',     //分类管理模态中选定树的名称
            modalType:'添加',                   //模态框修改的类型 添加|编辑
            categoryModalData:{                         //字典类型模态输入框中的值
                name:'',                        //名称
                icon:'',                        //图标
                code:'',                        //编号
                dis_order:null,                 //排序优先级
                description:'',                 //描述
                status:true,                    //当前状态
                parent_id:null,                 //父节点ID
            },
            dictionaryData:{                    //字典值模态中的值
                name:'',                        //字典名称
                cate_id:null,                   //字典分类项id
                code:'',                        //字典项目编码
                dict_value:'',                  //字典项目值
                pinyin:'',                      //拼音
                description:'',                 //描述
                status:true,                    //状态 0可用 1不可用
                dis_order:0                     //排序优先级
            }
        },
        methods: {
            //选择模态 菜单 状态
            changeCheck:function (item) {
                item = !item;
            }
        }
    });

    var $table = $("#table");       //页面主体中的table 字典类型中的字典项
    var $categoryTable =  $("#categoryTable");//类型模态中的table 树型类型table
    //树型bootstrapTable配置
    $categoryTable.bootstrapTable({
        toolbar: '#categoryBar',
        sidePagination: 'client',
        pagination: false,
        treeView: true, //treeView:true表示启用树表格模式；
        treeId: "id",   //treeId:'Id'表示每一行tree的id；
        treeField: "name",      //treeField:'Name'表示要对那一列进行展开；
        treeRootLevel: 1,       //treeRootLevel:1表示树根的级别。
        clickToSelect: true,
        collapseIcon: "glyphicon glyphicon-menu-right",//折叠样式
        expandIcon: "glyphicon glyphicon-menu-down",//展开样式
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }]
    });

    //获取字典分类zTree信息 并且绘制
    function getLeftZTree() {
        vm.leftTreeLoading = true;
        //获取树形结构
        ajax('/core/dict_category/get_tree/','')
            .then(function (response) {
                if(response && response.success==1){
                    vm.leftTreeLoading = false;
                    vm.leftTreeList = response.data;
                    //绘制zTree树
                    renderZTree();
                    //通过当前数据的第一行获取数据绘制表格
                    if(vm.leftTreeList[0]){
                        vm.leftTreeType = vm.leftTreeList[0];
                        getTableList(vm.leftTreeType.id)
                    }
                }else{
                    toastr.info(response.error_msg);
                }
            })
            .catch(function (err) {
                toastr.info(err);
                vm.leftTreeLoading = false;
            });
    }

    //通过字典分类id 获取table值
    function getTableList(id) {
        //获取table list结构
        ajax('/core/dict/get/',{id:id})
            .then(function (response) {
                if(response && response.success==1){
                    vm.tableList = response.data;
                    //绘表格数据
                    $table.bootstrapTable('load', vm.tableList);
                }else{
                    toastr.info(response.error_msg);
                }
            })
            .catch(function (err) {
                toastr.info(err);
            })
    }

    //获取字典分类模块中 分类table 值 并且绘制
    function getCategoryTable() {
        //获取字典类型boottable树形结构
        ajax('/core/dict_category/get_all/','')
            .then(function (response) {
                if(response && response.success==1){
                    vm.categoryTableList = response.data;
                    //绘表格数据
                    $categoryTable.bootstrapTable('load', vm.categoryTableList);
                }else{
                    toastr.info(response.error_msg);
                }
            })
            .catch(function (err) {
                toastr.info(err);
            })
    }

    //左侧zTree配置
    var setting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: leftZTreeClick
        }
    };
    // 左侧zTree点击事件
    function leftZTreeClick(event, treeId, treeNode, clickFlag) {
        //TODO:通过点击发送请求 获取到表
        //左侧树选定值以后 重绘表格数据
        getTableList(treeNode.id);
        //将表格title改变
        vm.leftTreeType = treeNode;
    }

    //添加权限模态zTree调用
    var categorySetting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: categorySettingZTreeClick
        }
    };

    //添加分类管理模态中选择类型 触发zTree
    function categorySettingZTreeClick(event, treeId, treeNode, clickFlag) {
        vm.categoryModalData.parent_id = treeNode.id;
        vm.permissionsModalParentNameL = treeNode.name;
    }
    //字典分类模态中选择 '上级' 点击  触发树结构
    $('#addPermissionInput').click(function () {
        $("#permissionTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });


    //点击除模态中的zTree外 关闭zTree
    function onBodyDown(event) {
        if (!(event.target.id == "modalZTree" || $(event.target).parents("#modalZTree").length > 0)) {
            $("#modalZTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }

    //字典值模态 添加按钮被点击
    function addBtnClick() {
        //清空 vm.dictionaryData 中的值
        vm.dictionaryData = {                    //字典值模态中的值
            name:'',                        //字典名称
            cate_id:null,                   //字典分类项id
            code:'',                        //分类编码
            dict_value:'',                  //分类值
            pinyin:'',                      //拼音
            description:'',                 //描述
            status:true,                    //状态 0可用 1不可用
            dis_order:0                     //排序优先级
        };
        vm.modalType = "添加";
        $("#modal").modal('show');
    }
    //字典分类管理模态 按钮被点击
    function categoryClick() {
        $("#categoryModal").modal('show');
        //获取字典分类模块中 分类table 值 并且绘制
        getCategoryTable();
    }
    //字典分类管理模块中新增点击
    function addCategoryClick() {
        vm.categoryModalData={
            name:'',                        //名称
            icon:'',                        //图标
            code:'',                        //编号
            dis_order:null,                 //排序优先级
            description:'',                 //描述
            status:true,                    //当前状态
            parent_id:null,                 //父节点ID
        };
        vm.modalType = "添加";
        $("#addCategoryModal").modal('show');
    }

    //为主体中的列表添加按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfedit table-btn btn-primary">编辑</button>',
            '<button type="button" class="RoleOfdelete btn-primary table-btn">删除</button>',
        ].join('');
    }
    //为按钮列表添加事件
    window.actionEvents = {
        //添加编辑事件
        'click .RoleOfedit': function (e, value, row, index) {
            let newData = Object.assign({},row);
            newData.status = (newData.status==0)?true:false;
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.dictionaryData = newData;
            vm.modalType = "编辑";
            $("#modal").modal('show');
        },
        //添加删除事件
        'click .RoleOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.dictionaryData = row;
            $("#deleteModal").modal('show');
        }
    };
    //为模态中的列表添加按钮
    function operateCategoryFormatter(value, row, index) {
        return [
            '<button type="button" class="CategoryOfedit table-btn btn-primary">编辑</button>',
            '<button type="button" class="CategoryOfdelete btn-primary table-btn">删除</button>',
        ].join('');
    }
    //为按钮列表添加事件
    window.actionCategoryEvents = {
        //添加编辑事件
        'click .CategoryOfedit': function (e, value, row, index) {
            let newData = Object.assign({},row);
            newData.status = (newData.status==0)?true:false;
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.categoryModalData = newData;
            vm.modalType = "编辑";
            $("#addCategoryModal").modal('show');
        },
        //添加删除事件
        'click .CategoryOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.categoryModalData = row;
            $("#deleteCategoryModal").modal('show');
        }
    };
    //为列表添加checkBox样式
    function checkBoxFormatter(value, row, index) {
        if(value==0){
            return [
                '<div id="check-box" class="open1"><div id="check" class="open2"></div></div>'
            ].join('');
        }else{
            return [
                '<div id="check-box" class="close1"><div id="check" class="close2"></div></div>'
            ].join('');
        }
    }

    //字典值模态确认按钮点击事件
    function add() {
        if(!vm.dictionaryData.name){toastr.info('名称不能为空!');return}
        if(!vm.dictionaryData.dict_value){toastr.info('项目值不能为空!');return}
        if(!vm.dictionaryData.dis_order){toastr.info('排序不能为空!');return}
        //将模态中的数据深度克隆一份 防止旧值被修改
        let newModalData = Object.assign({},vm.dictionaryData);
        //checkBox 将true false 转换为 0 1
        vm.dictionaryData.status?newModalData.status = 0:newModalData.status = 1;      //当前状态
        if(vm.modalType=="添加"){
            newModalData.cate_id = vm.leftTreeType.id;      //将字典类别id 赋值给发送数据的 cate_id
            ajax('/core/dict/add/',newModalData)
                .then(function (response) {
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //成功后重新绘制table
                        getTableList(vm.leftTreeType.id);
                        toastr.success('添加成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                })
                .catch(function (err) {
                    toastr.info(err);
                });
        }else{
            ajax('/core/dict/edit/',newModalData)
                .then(function (response) {
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //成功后重新绘制table
                        getTableList(vm.leftTreeType.id);
                        toastr.success('编辑成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                })
                .catch(function (err) {
                    toastr.info(err);
                });
        }
    };
    //添加分类模态中确认按钮点击事件
    function addCategory() {
        if(!vm.categoryModalData.name){toastr.info('名称不能为空!');return}
        if(!vm.categoryModalData.code){toastr.info('编号不能为空!');return}
        if(!vm.categoryModalData.dis_order){toastr.info('排序不能为空!');return}
        console.log(vm.categoryModalData);
        //将模态中的数据深度克隆一份 防止旧值被修改
        let newModalData = Object.assign({},vm.categoryModalData);
        //checkBox 将true false 转换为 0 1
        vm.categoryModalData.status?newModalData.status = 0:newModalData.status = 1;      //当前状态

        if(vm.modalType=="添加"){
            ajax('/core/dict_category/add/',newModalData)
                .then(function (response) {
                    if(response && response.success==1){
                        $("#addCategoryModal").modal('hide');
                        //成功后重新绘制table
                        getCategoryTable();
                        getLeftZTree();
                        toastr.success('添加成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                })
                .catch(function (err) {
                    toastr.info(err);
                });
        }else{
            newModalData.parent_id = newModalData.ParentId;
            ajax('/core/dict_category/edit/',newModalData)
                .then(function (response) {
                    if(response && response.success==1){
                        $("#addCategoryModal").modal('hide');
                        //成功后重新绘制table
                        getCategoryTable();
                        getLeftZTree();
                        toastr.success('编辑成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                })
                .catch(function (err) {
                    toastr.info(err);
                });
        }
    }
    //删除主体字典项表格中一项
    function deleteTable(){
        ajax('/core/dict/del/',{id:vm.dictionaryData.id})
            .then(function (response) {
                if(response && response.success==1){
                    $("#deleteModal").modal('hide');
                    //成功后重新绘制table
                    getTableList(vm.leftTreeType.id);
                    toastr.success('删除成功');
                }else{
                    toastr.info(response.error_msg)
                }
            })
            .catch(function (err) {
                toastr.info(err);
            });

    }
    //删除字典类型表格中一项
    function deleteCategoryTable() {
        ajax('/core/dict_category/del/',{id:vm.categoryModalData.id})
            .then(function (response) {
                if(response && response.success==1){
                    $("#deleteCategoryModal").modal('hide');
                    //成功后重新绘制table
                    getCategoryTable();
                    toastr.success('删除成功');
                }else{
                    toastr.info(response.error_msg)
                }
            })
            .catch(function (err) {
                toastr.info(err);
            });
    }
    //绘制zTree树 方法
    function renderZTree() {
        //分类添加模态中树绘制
        $.fn.zTree.init($("#permissionTree"), categorySetting,vm.leftTreeList);
        //左侧树
        $.fn.zTree.init($("#myTree"), setting, vm.leftTreeList);
    }

    //dom渲染完成后加载
    $(document).ready(function () {
        //获取zTree信息 并且绘制
        getLeftZTree();
    });
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
{% endblock %}
